<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
<script>
	//点击，还是轮播
	var index=1;
	$(function(){
		var timer;
		function shiftImg(){ 
			if(index==6){
				 index=0;
			}
			index++;
			 
			$(".adver").css("background-image","url(images/adver0"+index+".jpg)");
			$(".adver ul li:eq("+(index-1)+")").css({"background": "orange"}).siblings().css("background","#333333");
			
		}
		timer=window.setInterval(function(){shiftImg();},1000);
		
		$(".adver").hover(function(){
			$(".arrowLeft,.arrowRight").show();
			window.clearInterval(timer);
		},function(){
			$(".arrowLeft,.arrowRight").hide();
			//timer=window.setInterval("shiftImg()",1000);
			timer=window.setInterval(function(){shiftImg();},1000);
		});
		$(".adver .arrowLeft").click(function(){
			if(index==1){
				alert("已经是第一张了");
				return;
			}
			index--;
			$(this).parent().css("background-image","url(images/adver0"+index+".jpg)");
			$(".adver ul li:eq("+(index-1)+")").css({"background": "orange"}).siblings().css("background","#333333");
			
		});
		$(".adver .arrowRight").click(function(){
			if(index==6){
				alert("已经是最后一张了");
				return;
			}
			index++;
			$(this).parent().css("background-image","url(images/adver0"+index+".jpg)");
			$(".adver ul li:eq("+(index-1)+")").css({"background": "orange"}).siblings().css("background","#333333");
			
		});
		
	});
</script>
</body>
</html>